<script lang="ts" setup>
import LeftSide from "../../layout/LeftSide/index.vue";
import RightSide from "../../layout/RightSide/index.vue";
</script>

<template>
  <a-layout style="height: 100vh; display: flex;">
    <!-- 侧边栏 -->
    <LeftSide style="width: 250px; background-color: #4d79a5; color: #ffffff; padding: 16px;"/>

    <!-- 中间部分 -->
    <RightSide style="flex: 1; background: linear-gradient(90deg, #e6eef8 70%, #ffffff); padding: 24px; overflow-y: auto;"/>
  </a-layout>
</template>

<style scoped>
a-layout {
  display: flex;
}

/* 左侧栏样式 */
left-side {
  background-color: #4d79a5;
  color: #ffffff;
  padding: 16px;
  height: 100%;
  border-right: 3px solid #3a5f85;
}

/* 中间区域样式 */
right-side {
  flex: 1;
  background: linear-gradient(90deg, #e6eef8 70%, #ffffff);
  padding: 24px;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(252, 253, 255, 0.3);
}
</style>